<template>
    <div class="content_box">
        <div class="main-box">
            <p class="main-title">缴费账单管理</p>

            <div class="statistics">
                <el-row :gutter="20">
                    
                    <el-col :span="8">
                        <div class="box">
                            <div class="title_box">
                                <p class="title">待核销中金额（元）</p>
                             
                            </div>
                            <p class="price">
                                <span>￥</span>
                                {{tjMsg.not_pending_amount}}
                            </p>
                            <div class="num">
                                <p>待核销数量<span>{{tjMsg.not_pending_num}}</span></p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="box">
                            <div class="title_box">
                                <p class="title">已核销金额（元）</p>
                                <!-- <p class="text">
                  <img src="@/assets/aq_icon.png" alt="" />
                </p> -->
                            </div>
                            <p class="price">
                                <span>￥</span>
                                {{tjMsg.pending_success_amount}}
                            </p>
                            <div class="num">
                                <p>已核销数量<span>{{tjMsg.pending_success_num}}</span></p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="box">
                            <div class="title_box">
                                <p class="title">核销失败（元）</p>
                                <p class="text">
                                    <img src="@/assets/aq_icon.png" alt="" />
                                </p>
                            </div>
                            <p class="price">
                                <span>￥</span>
                                {{tjMsg.pending_fail_amount}}
                            </p>
                            <div class="num">
                                <p>核销失败数量<span>{{tjMsg.pending_fail_num}}</span></p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 搜索 -->
            <search-component :closeDown="true" :search-options="searchOptions" :params="params"
                @search="onSearch" @reset="onReset"></search-component>

            <!-- 切换 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :name="'first' + index" v-for="(item, index) in tabList" :key="index">
                    <template #label>
                        <span>{{ item.name }}
                            <span v-if="tabListIndex == index" style="color: red; font-size: 12px">({{ total
                            }}笔)</span></span>
                    </template>
                </el-tab-pane>

            </el-tabs>

            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="case_code" label="案件编号" width="250" />
                <el-table-column prop="crime_name" label="嫌疑人" width="150" />
                <el-table-column prop="bookkeeping_time_text" label="核销时间" width="150" />
                <el-table-column prop="pay_amount" label="缴费金额" width="150" />
                <el-table-column prop="baar_xm" label="办案人员/单位" width="250" />
                <el-table-column prop="bookkeeping_status" label="台账状态" width="150"/>
                <el-table-column prop="pay_type_text" label="支付方式" width="150"/>
                <el-table-column prop="address" label="入账金额" width="150"/>
                <el-table-column label="操作" min-width="250" align="right" fixed="right">
                    <template #default="scope">
                        <el-button size="mini" type="primary" @click="toSee(scope.row.id)">查看</el-button>
                        <el-button size="mini" type="primary" @click="toSee(scope.row.id)">凭证打印</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination :page-size="params.pagesize" :size="params.page" layout="total, prev, pager, next"
                    :total="total" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";
import { pay_dashboard,pay_list } from "@/api/finance";

// 搜索参数
let searchOptions = ref(
  [
  { label: "案件编号：", type: "input", prop: "case_code", placeholder: "请输入" },
  {
    label: "交易时间：",
    type: "date-range",
    prop: "name7",
    placeholder: "请选择",
    // options:agentOptions.value,
  },
  {
    label: "交易金额：",
    type: "input-range",
    prop: "min_amount",
    prop1: "max_amount",
    placeholder: "请输入",
  },
  
  {
    label: "嫌疑人姓名：",
    type: "input",
    prop: "crime_name",
    placeholder: "请输入",
  },
  {
    label: "支付方式：",
    type: "select",
    prop: "status",
    placeholder: "请选择",
    options:[],
  },
  {
    label: "台账状态：",
    type: "select",
    prop: "department_id",
    placeholder: "请选择",
    options:[],
  },
  
]
)

// 统计
let tjMsg = ref({})
const tj = async()=>{
    await pay_dashboard().then(res=>{
        if(res.code == 1){
            tjMsg.value = res.data
        }
    })
}

// 切换
let activeName = ref('first0')
let tabListIndex = ref(0)
let tabList = ref(
    [
        { name: '全部', status: '' },
        { name: '待核销', status: '0' },
        { name: '已核销', status: '1' }
    ]
)

// 表格
let total = ref(0)
let params = ref({
    page: 1,
    pagesize: 10
});
let tableData = ref([])
const getList = ()=>{
    pay_list(params.value).then(res=>{
        if(res.code == 1){
            tableData.value = res.data.rows
            total.value = res.data.total
        }
    })
}

onMounted(() => {
    tj()
    getList()
    
})
</script>
<style scoped lang="scss"></style>
    